<%@page import="itsm.isperp.framework.core.context.ContextHolder"%><%@ page
	language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%
  String path = request.getContextPath();
			String basePath = ContextHolder.getWebServerName(request);
%>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

body {
	color: #666;
	font: 12px/1.5 Arial;
}
/* star */
.star {
	position: relative;
	width: 600px;
	margin: 5px auto;
	height: 24px;
}

.star ul,#star span {
	float: left;
	display: inline;
	height: 19px;
	line-height: 19px;
}

.star ul {
	margin: 0 10px;
}

.star li {
	float: left;
	width: 26px;
	cursor: pointer;
	text-indent: -9999px;
	background: url(../../../img/wechat/star.png) no-repeat;
}

.star strong {
	color: #f60;
	padding-left: 10px;
}

.star li.on {
	background-position: 0 -28px;
}

.star p {
	position: absolute;
	top: 20px;
	width: 159px;
	height: 60px;
	display: none;
	padding: 7px 10px 0;
}

.star p em {
	color: #f60;
	display: block;
	font-style: normal;
}

.btn1 {
	border: 1px solid #386bb8;
	color: white;
	background-image: -webkit-linear-gradient(#5ea6ff, #1593eb);
}

.btnDiv {
	text-align: center;
	margin-bottom: 20px;
	padding: 10px;
}

.ui-btn-up-c {
	border: 1px solid #cccccc;
	background: #5ea6ff; /* font-weight:bold; */ /* color:#ffffff ; */
	text-shadow: none;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#5ea6ff),
		to(#1593eb) );
	background-image: -webkit-linear-gradient(#5ea6ff, #1593eb);
	background-image: -moz-linear-gradient(#5ea6ff, #1593eb);
	background-image: -ms-linear-gradient(#5ea6ff, #1593eb);
	background-image: -o-linear-gradient(#5ea6ff, #1593eb);
	background-image: linear-gradient(#5ea6ff, #1593eb);
}

.btnDiv DIV {
	color: #ffffff;
	background-color: #5ea6ff;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 17px;
	font-weight: bold;
	text-shadow: none;
	background: -moz-linear-gradient(top, #5ea6ff, #1593eb); /*非IE6的其它*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5ea6ff),
		to(#1593eb) ); /*非IE6的其它*/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
</style>

<div class="ui-body">

	<div class="ui-body">
		<form:form commandName="model" cssClass="validate" id="incidentForm"
			data-ajax="false"
			action="${contextUrl }api/wechat/incident/saveSatisfaction">

			<input type="hidden" id="satisfaction" name="satisfaction" value="0" />
			<input type="hidden" id="satisfactionQuality"
				name="satisfactionQuality" value="0" />
			<input type="hidden" id="satisfactionApproach"
				name="satisfactionApproach" value="0" />

			<div style="display: none">
				<input type="hidden" name="openid" value="${openid }"> <input
					name="id" type="hidden" value="${model.id }">
			</div>

			<div class="box">

				<div class="input-row">
					<label>总体满意度：</label>
				</div>

				<div id="star" class="star">
					<span></span>
					<ul>
						<li onclick="fnPoint(1,'star_li')" gr="star_li" id="star_li1"><a
							href="">1</a></li>
						<li onclick="fnPoint(2,'star_li')" gr="star_li" id="star_li2"><a
							href="">2</a></li>
						<li onclick="fnPoint(3,'star_li')" gr="star_li" id="star_li3"><a
							href="">3</a></li>
						<li onclick="fnPoint(4,'star_li')" gr="star_li" id="star_li4"><a
							href="">4</a></li>
						<li onclick="fnPoint(5,'star_li')" gr="star_li" id="star_li5"><a
							href="">5</a></li>
					</ul>
					<span id="span_star_li"></span>
					<p></p>
				</div>

				<div class="input-row">
					<label>技能水平：</label>
				</div>

				<div id="star1" class="star">
					<span></span>
					<ul>
						<li onclick="fnPoint(1,'star1_li')" gr="star1_li" id="star1_li1"><a
							href="">1</a></li>
						<li onclick="fnPoint(2,'star1_li')" gr="star1_li" id="star1_li2"><a
							href="">2</a></li>
						<li onclick="fnPoint(3,'star1_li')" gr="star1_li" id="star1_li3"><a
							href="">3</a></li>
						<li onclick="fnPoint(4,'star1_li')" gr="star1_li" id="star1_li4"><a
							href="">4</a></li>
						<li onclick="fnPoint(5,'star1_li')" gr="star1_li" id="star1_li5"><a
							href="">5</a></li>
					</ul>
					<span id="span_star1_li"></span>
					<p></p>
				</div>

				<div class="input-row">
					<label>服务态度：</label>
				</div>

				<div id="star2" class="star">
					<span></span>
					<ul>
						<li onclick="fnPoint(1,'star2_li')" gr="star2_li" id="star2_li1"><a
							href="">1</a></li>
						<li onclick="fnPoint(2,'star2_li')" gr="star2_li" id="star2_li2"><a
							href="">2</a></li>
						<li onclick="fnPoint(3,'star2_li')" gr="star2_li" id="star2_li3"><a
							href="">3</a></li>
						<li onclick="fnPoint(4,'star2_li')" gr="star2_li" id="star2_li4"><a
							href="">4</a></li>
						<li onclick="fnPoint(5,'star2_li')" gr="star2_li" id="star2_li5"><a
							href="">5</a></li>
					</ul>
					<span id="span_star2_li"></span>
					<p></p>
				</div>

				<!-- <div class="input-row">
					<label>是否有跟您确认解决情况：</label>
				</div>

				<div class="ui-radio">
					<label for="Radio1" data-corners="true" data-shadow="false"
						data-iconshadow="true" data-wrapperels="span"
						data-icon="radio-off" data-theme="d" data-mini="false"
						class="ui-radio-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-first-child ui-btn-up-d"><span
						class="ui-btn-inner"><span class="ui-btn-text">是<span
								style="font-size:11px;"></span> </span><span
							class="ui-icon ui-icon-radio-off ui-icon-shadow">&nbsp;</span> </span> </label><input
						type="radio" name="areLink" id="Radio1" checked="checked"
						value="1">
				</div>

				<div class="ui-radio">
					<label for="Radio3" data-corners="true" data-shadow="false"
						style="border-width:1px;" data-iconshadow="true"
						data-wrapperels="span" data-icon="radio-on" data-theme="d"
						data-mini="false"
						class="ui-radio-on ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-last-child ui-btn-up-d"><span
						class="ui-btn-inner"><span class="ui-btn-text">否<span
								style="font-size:11px;"></span> </span><span
							class="ui-icon ui-icon-radio-on ui-icon-shadow">&nbsp;</span> </span> </label><input
						type="radio" name="areLink" id="Radio3" value="0">
				</div>
 -->

				<div class="weui-cells weui-cells_form" style="margin-top:0px;">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<textarea class="weui-textarea" placeholder="您对我们服务方面有什么更好的建议"
								rows="3" name="customerOpinion" id="customerOpinion"></textarea>
						</div>
					</div>
				</div>
				
				<a class="weui-btn weui-btn_primary" onclick="return takeSubmit();">
			提交 </a>

			</div>
		</form:form>
	</div>
	<h2 class="wx-info-li-title ui-title">事件信息</h2>
	<div class="ui-body ui-body-a ui-corner-all">
		<jsp:include page="incidentInfoDetail.jsp"></jsp:include></div>
</div>
<script type="text/javascript">
   document.title="满意度评价";
	var subing = false;
	function takeSubmit() {
		if (subing == false) {
			var result = $("#incidentForm").valid();
			if (result) {
				$(this).hide();
				$("#subBtn1").text("提交中...");
				subing = true;
				$("#incidentForm").submit();
			}
			return result;
		}
	}
	//评分处理
	function fnPoint(num, gry) {
		var aMsg = [ "很不满意|很不满意", "不满意|不太满意", "一般|一般", "满意|满意", "非常满意|非常满意" ];

		$("[id^=" + gry + "]").attr("class", "");
		for ( var i = 1; i <= num; i++) {
			$("#" + gry + i).attr("class", "on");
		}
		var oSpan = $("#" + "span_" + gry);
		//alert(oSpan.html());
		var thtml = "<strong>" + num + " 分</strong> ("
				+ aMsg[num - 1].match(/\|(.+)/)[1] + ")";
		oSpan.html(thtml);

		if (gry == "star_li") {
			$("#satisfaction").val(num);
		} else if (gry == "star1_li") {
			$("#satisfactionQuality").val(num);
		} else if (gry == "star2_li") {
			$("#satisfactionApproach").val(num);
		}
		// oSpan.innerHTML = "<strong>" + num + " 分</strong> (" + aMsg[num - 1].match(/\|(.+)/)[1] + ")";
	}
</script>

